import { ProForm, ProFormDependency, ProFormRadio, ProFormSelect, ProFormText, ProFormTextArea } from "@ant-design/pro-components"
import { useDictOptions } from "@/hooks";
import { checkRoleNameUnique, checkRoleKeyUnique, queryAppList, listRole } from '@/api/system/role'

const RoleForm = ({ roleId }) => {
  const { data: options } = useDictOptions('sys_normal_disable')

  const checkRoleName = async (_, value) => {
    const msg = '角色名称已存在'
    if (value === '') {
      return Promise.resolve()
    } else {
      const checkData = {
        roleName: value,
        id: roleId
      }
      const response = await checkRoleNameUnique(checkData)
      if (response.data.code === '1') {
        return Promise.resolve()
      } else {
        return Promise.reject(msg)
      }
    }
  }

  const checkRoleKey = async (_, value) => {
    const msg = '角色编码已存在'
    if (value === '') {
      return Promise.resolve()
    } else {
      const checkData = {
        roleKey: value,
        id: roleId
      }
      const response = await checkRoleKeyUnique(checkData)
      if (response.data.code === '1') {
        return Promise.resolve()
      } else {
        return Promise.reject(msg)
      }
    }
  }

  return <>
    <ProForm.Group rowProps={{
      gutter: 20
    }}>

      <ProForm.Item name='id' hidden></ProForm.Item>
      <ProForm.Item name='version' hidden></ProForm.Item>
      <ProForm.Item name='sort' hidden></ProForm.Item>

      <ProFormText
        colProps={{ lg: 12, md: 12, sm: 24 }}
        name="roleName"
        label="角色名称"
        placeholder="请输入角色名称"
        rules={[{ required: true, message: '请输入角色名称' }, { validator: checkRoleName, validateTrigger: 'onBlur' }]}
      />

      <ProFormText
        colProps={{ lg: 12, md: 12, sm: 24 }}
        name="roleKey"
        label="角色编码"
        placeholder="请输入角色编码"
        rules={[{ required: true, message: '请输入角色编码' }, { validator: checkRoleKey, validateTrigger: 'onBlur' }]}
      />
      <ProFormSelect
        colProps={{ lg: 12, md: 12, sm: 24 }}
        name="parentRoleCode"
        label="上级角色"
        placeholder="请选择"
        request={async () => {
          const res = await listRole({ pageNum: 1, pageSize: 999 })
          return res.data?.list.filter(d => d.id !== roleId).map(d => ({ label: d.roleName, value: d.roleKey }))
        }}
      />


      <ProFormSelect
        colProps={{ lg: 12, md: 12, sm: 24 }}
        name="defualtAppId"
        label="默认应用"
        placeholder="请选择"
        request={async () => {
          const res = await queryAppList()
          return res.data?.map(d => ({ label: d.app_name, value: d.id }))
        }}
      />

      <ProFormTextArea
        rows={4}
        colProps={{ lg: 12, md: 12, sm: 24 }}
        name="remark"
        label="备注"
        placeholder="请输入内容"
      />

      <ProFormRadio.Group
        colProps={{ lg: 12, md: 12, sm: 24 }}
        label="状态"
        name="status"
        fieldProps={{
          optionType: "button",
          buttonStyle: "solid"
        }}
        options={options}
      />
    </ProForm.Group>
  </>
}

export default RoleForm